<template>
  <el-dialog v-model="visible" title="添加链接" width="40%" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false" @close="closeDialog">
    <el-form :model="formData" ref="formRef" class="form" :show-message="false">
      <el-form-item label="图片" prop="floorInfoImg" required>
        <el-upload class="avatar-uploader" :action="activeUrl" :headers="headers" :show-file-list="false" :before-upload="beforeUpload" :on-success="uploadSuccess">
          <div class="upload">
            <img class="avatar" v-if="formData.floorInfoImg" :src="formData.floorInfoImg" />
            <div class="avatar-icon" v-else>
              <el-icon><Plus /></el-icon>
              <span class="addCont">添加图片</span>
            </div>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="链接">
        <div class="link">
          <Button type="primary" label="选择链接" @click="onSelectClick()" />
          <div>
            <span v-if="formData.floorInfoName">链接名称为:{{ formData.floorInfoName }}</span>
          </div>
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <Button label="取消" @click="onCancelClick" />
      <Button label="确定" type="primary" @click="onSubmitClick" />
    </template>
  </el-dialog>

  <Link v-model:visible="linkVisible" ref="linkRef" :linkType="0b11" @change="onLinkChange" />
</template>
<script setup>
import { computed, nextTick, reactive, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { apiBasePath } from '@/api/config'
import Link from './link.vue'
import Button from '@/components/button/button.vue'

const props = defineProps(['visible'])
const emit = defineEmits(['update:visible', 'change'])

const visible = computed({
  get: () => {
    return props.visible
  },
  set: (value) => emit('update:visible', value)
})

let showText = ref(true)
let formRef = ref(null)
let linkVisible = ref(false)

const activeUrl = apiBasePath + '/medinstrument/boss/uploadSingleFile'

const headers = {
  Authorization: localStorage.getItem('_boss_token')
}

const formData = reactive({
  floorInfoImg: '',
  floorInfoName: '',
  sort: 0,
  floorInfoUrl: '',
  floorInfoVal: ''
})

const beforeUpload = (file) => {
  const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg'
  const isLt1M = file.size / 1024 / 1024 < 10

  if (!isJPG) {
    ElMessage.error('只能上传jpg/png/jpeg文件!')
  }
  if (!isLt1M) {
    ElMessage.error('上传图片大小不能超过 10MB!')
  }
  return isJPG && isLt1M
}

const uploadSuccess = (res) => {
  showText.value = false
  if (res.code == 200) {
    formData.floorInfoImg = res.data
  }
}

const onSelectClick = () => {
  linkVisible.value = true
}

const onLinkChange = (row) => {
  formData.floorInfoVal = row.supplierId
  if (row.goodsId) {
    formData.floorInfoName = row.goodsName
    formData.floorInfoUrl = '跳转商品'
  } else {
    formData.floorInfoName = row.supplierName
    formData.floorInfoUrl = '跳转店铺'
  }
}

const onCancelClick = () => {
  visible.value = false
}

const onSubmitClick = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      emit('change', JSON.parse(JSON.stringify(formData)))
      visible.value = false
    }
  })
}

const closeDialog = () => {
  showText.value = true
  formData.floorInfoImg = ''
  formData.floorInfoName = ''
  nextTick(() => {
    formRef.value.clearValidate()
  })
}
</script>

<style scoped lang="scss">
.form {
  &.el-form {
    :deep(.el-form-item__label) {
      width: 60px;
    }
  }

  .link {
    display: flex;
    flex-direction: column;
  }

  .upload {
    width: 150px;
    height: 150px;
    .avatar {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
